/**
 * 查看图片业务共通js
 * 
 *   create by:zhengxb 2019.9.22 
 *   
 * */
var MY_SHOW_IMG = (function() {

	/**
	 * 图片查看处理模态框
	 * 
	 * @param institutionId  
	 * @param reportImgId    
	 * @param $tbody           
	 * 
	 * */
	var urlImg;
	function createShowImgModal( institutionId,reportImgId ){
			var params = {};
			// 输入有误的情况下，退出
			params.institutionId = institutionId;
			params.reportImgId = reportImgId;

			// 报告列表
			WeKnow.loading();

			$.ajax({
		        type: "POST",
		        url: "invs_sewage_test_report.do/load_image",
		        dataType: "json",
		        contentType:"application/json",
		        data: JSON.stringify(params),
		        async: true,//异步调用
		        success: function(data) {

		        	WeKnow.closeLoading();

					if (!WeKnow.filterAjaxResult(data)) return false; // session过期check

		        	if (data.errcode == 0) {
		        		if ( 'imagelist' in data && data.imagelist.length == 0 ){
		        			WeKnow.errorMsg('未查询到图片');
		        			return false;
		        		}

		        		$(data.imagelist).each(function( idx,img){
							urlImg=img.originImgUrl;
		        		});
						showImg();
		        		return true;
		        	} else if (data.errcode == -1 ) {
		        		WeKnow.errorMsg( data.errMsg );
		        	} else {
		        		WeKnow.systemMsg('查询失败，请重新登录后再试');
		        	}
		        }
			});
		// var e = getHmtl();
		//
		// var $modal = $(e).appendTo('body').modal('show');
		//
		//
		// $modal.one('show.bs.modal', function() {
		//
		// 	// 无处理
		// }).one('shown.bs.modal', function() {
		//
		// 	var $tbody = $modal.find('tbody[name="tbodyCommonImageList"]');
		// 	$tbody.empty();
		//
		// 	var params = {};
		// 	// 输入有误的情况下，退出
		// 	params.institutionId = institutionId;
		// 	params.reportImgId = reportImgId;
		//
		// 	// 报告列表
		// 	WeKnow.loading();
		//
		// 	$.ajax({
		//         type: "POST",
		//         url: "invs_sewage_test_report.do/load_image",
		//         dataType: "json",
		//         contentType:"application/json",
		//         data: JSON.stringify(params),
		//         async: true,//异步调用
		//         success: function(data) {
		//
		//         	WeKnow.closeLoading();
		//
		// 			if (!WeKnow.filterAjaxResult(data)) return false; // session过期check
		//
		//         	if (data.errcode == 0) {
		//         		if ( 'imagelist' in data && data.imagelist.length == 0 ){
		//         			WeKnow.errorMsg('未查询到图片');
		//         			return false;
		//         		}
		//
		//         		e = '';
		//         		$(data.imagelist).each(function( idx,img){
		//         			e +='<tr>';
		// 	        			e +='<td>';
		// 	        				e +='<img style="width: 100%;" src="'+img.originImgUrl+'">';
		// 	        			e +='</td>';
		//         			e +='</tr>';
		//         		});
		//         		$tbody.append(e);
		//
		//         		return true;
		//         	} else if (data.errcode == -1 ) {
		//         		WeKnow.errorMsg( data.errMsg );
		//         	} else {
		//         		WeKnow.systemMsg('查询失败，请重新登录后再试');
		//         	}
		//         }
		// 	});
		// }).one('hidden.bs.modal', function() {
		// 	$modal.remove(); // 取消事件注册
		// });
	}
	function showImg() {
		$("body").parents("html").css('overflow','hidden');
		//给body添加弹出层的html
		$("body").append('<div class="mask-layer">' +
			'<div class="mask-layer-black"></div>'  +
			'<div class="mask-layer-container">'   +
			'<div class="mask-layer-container-operate">'    +
			'<button class="mask-out btn-default-styles">放大</button>' +
			'<button class="mask-in btn-default-styles">缩小</button>'  +
			'<button class="mask-clockwise btn-default-styles">顺旋转</button>'+
			'<button class="mask-counterclockwise btn-default-styles">逆旋转</button>' +
			'<button class="mask-close btn-default-styles">关闭</button>' +
			' </div>'  +
			' <div class="mask-layer-imgbox auto-img-center"></div>' +
			'  </div>' +
			'</div>'
		);
		var spin_n = 0;
		$(".mask-layer-imgbox").empty();
		spin_n = 0;
		$(".mask-layer-imgbox").append('<p><img src="' + urlImg + '" alt=""></p>');

		$(".mask-layer").show();
		//图片居中显示
		var box_width = $(".auto-img-center").width(); //图片盒子宽度
		var box_height = $(".auto-img-center").height();//图片高度高度
		var initial_width = 0;//初始图片宽度
		var initial_height = 0;//初始图片高度
		var img = new Image();
		img.src = urlImg;
		// 如果图片被缓存，则直接返回缓存数据
		if(img.complete){
			initial_width = img.width;
			initial_height = img.height;
			if (initial_width > initial_height) {
				$(".auto-img-center img").css("width", box_width);
				var last_imgHeight = $(".auto-img-center img").height();
				$(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
			} else {
				$(".auto-img-center img").css("height", box_height);
				var last_imgWidth = $(".auto-img-center img").width();
				$(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
			}
		}else{
			img.onload = function(){
				initial_width = img.width;
				initial_height = img.height;
				if (initial_width > initial_height) {
					$(".auto-img-center img").css("width", box_width);
					var last_imgHeight = $(".auto-img-center img").height();
					$(".auto-img-center img").css("margin-top", -(last_imgHeight - box_height) / 2);
				} else {
					$(".auto-img-center img").css("height", box_height);
					var last_imgWidth = $(".auto-img-center img").width();
					$(".auto-img-center img").css("margin-left", -(last_imgWidth - box_width) / 2);
				}
			}
		}

		//图片拖拽
		var $div_img = $(".mask-layer-imgbox p");
		//绑定鼠标左键按住事件
		$div_img.bind("mousedown", function (event) {
			event.preventDefault && event.preventDefault(); //去掉图片拖动响应
			//获取需要拖动节点的坐标
			var offset_x = $(this)[0].offsetLeft;//x坐标
			var offset_y = $(this)[0].offsetTop;//y坐标
			//获取当前鼠标的坐标
			var mouse_x = event.pageX;
			var mouse_y = event.pageY;
			//绑定拖动事件
			//由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
			$(".mask-layer-imgbox").bind("mousemove", function (ev) {
				// 计算鼠标移动了的位置
				var _x = ev.pageX - mouse_x;
				var _y = ev.pageY - mouse_y;
				//设置移动后的元素坐标
				var now_x = (offset_x + _x ) + "px";
				var now_y = (offset_y + _y ) + "px";
				//改变目标元素的位置
				$div_img.css({
					top: now_y,
					left: now_x
				});
			});
		});
		//当鼠标左键松开，接触事件绑定
		$(".mask-layer-imgbox").bind("mouseup", function () {
			$(this).unbind("mousemove");
		});
		//缩放 放大
		var zoom_n = 1;
		$(".mask-out").click(function () {
			zoom_n += 0.1;
			$(".mask-layer-imgbox img").css({
				"transform": "scale(" + zoom_n + ")",
				"-moz-transform": "scale(" + zoom_n + ")",
				"-ms-transform": "scale(" + zoom_n + ")",
				"-o-transform": "scale(" + zoom_n + ")",
				"-webkit-transform": "scale(" + zoom_n + ")"
			});
		});
		//缩放 缩小
		$(".mask-in").click(function () {
			zoom_n -= 0.1;
			zoom_n = zoom_n <= 0.1 ? 0.1 : zoom_n;
			$(".mask-layer-imgbox img").css({
				"transform": "scale(" + zoom_n + ")",
				"-moz-transform": "scale(" + zoom_n + ")",
				"-ms-transform": "scale(" + zoom_n + ")",
				"-o-transform": "scale(" + zoom_n + ")",
				"-webkit-transform": "scale(" + zoom_n + ")"
			});
		});
		//旋转
		$(".mask-clockwise").click(function () {
			spin_n += 90;
			$(".mask-layer-imgbox img").parent("p").css({
				"transform":"rotate("+ spin_n +"deg)",
				"-moz-transform":"rotate("+ spin_n +"deg)",
				"-ms-transform":"rotate("+ spin_n +"deg)",
				"-o-transform":"rotate("+ spin_n +"deg)",
				"-webkit-transform":"rotate("+ spin_n +"deg)"
			});
		});
		$(".mask-counterclockwise").click(function () {
			spin_n -= 90;
			$(".mask-layer-imgbox img").parent("p").css({
				"transform":"rotate("+ spin_n +"deg)",
				"-moz-transform":"rotate("+ spin_n +"deg)",
				"-ms-transform":"rotate("+ spin_n +"deg)",
				"-o-transform":"rotate("+ spin_n +"deg)",
				"-webkit-transform":"rotate("+ spin_n +"deg)"
			});
		});
		//关闭
		$(".mask-close").click(function () {
			$("body").parents("html").css('overflow','');
			$(".mask-layer").hide();

		});
		$(".mask-layer-black").click(function () {
			$("body").parents("html").css('overflow','');
			$(".mask-layer").hide();
		});

	}
	/**
	 * 生成申诉状态模态框
	 * */ 
	function getHmtl(){
		var e='';
		e += '<div class="modal fade" tabindex="-1" role="dialog" id="showCommonImageModal">\
				  <div class="modal-dialog  modal-lg" role="document">\
				    <div class="modal-content">\
				      <div class="modal-header">\
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
				        <h4 id="imageModalTitle" class="modal-title"></h4>\
				      </div>\
				      <div class="modal-body">\
				        <div class="row" style="padding-left:0px;">\
			           		<div class="col-xs-12">\
			           			<table class="table table-condensed table-hover table-bordered">\
								     <tbody name="tbodyCommonImageList"></tbody>\
								</table>\
			        		</div>\
			        	</div>\
				      </div>\
				    </div>\
				  </div>\
				</div>';
		return e;
	}

	return {
		createShowImgModal:createShowImgModal
	}
})();